import { OrderFilter } from '@/types/orderList'
import { Popup } from 'antd-mobile'
import React, { FC, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
interface TopSelectParam {
  selectfilterNum: number
  // callBackShow: (show: boolean) => void
  callBack: (filterNum: number, displayName: string) => void
  orderListFilter: Array<OrderFilter>
}

export const TopSelect: FC<{
  selectName: string
  show: boolean
  callBack: (show: boolean) => void
}> = (props) => {
  const showCss = 'text-orange-FF3627'
  return (
    <span
      className=" absolute right-0 inline-block w-r10.8 h-r4.4 leading-r4.4 text-right pr-r1.2"
      onClick={() => {
        props.callBack(!props.show)
      }}
    >
      <span className={' ' + (props.show ? showCss : '')}>{props.selectName}</span>
      {props.show ? (
        <i className=" relative top-r0.2 iconfont icon-a-icon_pullup"></i>
      ) : (
        <i className=" relative top-r0.2 iconfont icon-icon_pulldown"></i>
      )}
    </span>
  )
}

export const TopButtonSelect: FC<TopSelectParam> = (props) => {
  // const navigate = useNavigate()
  const list = props.orderListFilter.filter((val) => val.filterNum === props.selectfilterNum)
  const filterNum = list.length > 0 ? list[0].filterNum : ''
  const [selectFilterNum, setSelectFilterNum] = useState(filterNum)
  return (
    <div className=" fixed z-1000 top-r4.4 w-full h-r7.1 p-r1.6  leading-r4.4  bg-white text-left  ">
      {props.orderListFilter.map((val, key) => {
        return (
          <span
            key={key}
            className={
              ' ml-r1.2 inline-block w-r11.2 h-r4.0 leading-r4.0 text-center rounded-r1.8  ' +
              (selectFilterNum === val.filterNum
                ? ' text-orange-FF3627 bg-orange-FF3627 bg-opacity-10 '
                : '  bg-gray-F5F5F6 text-gray-212831')
            }
            onClick={() => {
              setSelectFilterNum(val.filterNum)
              props.callBack(val.filterNum, val.displayName)
            }}
          >
            {val.displayName}
          </span>
        )
      })}
    </div>
  )
}
